<template>
    <div class="task-manager">
      <h1>我的任务管理器</h1>
      <div class="input-section">
        <el-input 
          v-model="newTask" 
          placeholder="请输入新任务..." 
          @keyup.enter="addTask"
        >
          <template #append>
            <el-button @click="addTask" type="primary">添加</el-button>
          </template>
        </el-input>
      </div>
      
      <el-divider />
      
      <div class="task-list">
        <div v-if="tasks.length === 0" class="empty-tips">
          🎉 还没有任务，赶快添加一个吧！
        </div>
        
        <div v-else>
          <div v-for="(task, index) in tasks" :key="index" class="task-item">
            <el-checkbox v-model="task.completed">
              <span :class="{ 'completed': task.completed }">{{ task.text }}</span>
            </el-checkbox>
            <el-button 
              type="danger" 
              size="small" 
              @click="removeTask(index)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
//import { ElMessage } from 'element-plus' // 导入消息提示组件(我先为了实现空内容输入有错误弹窗,先注释掉这条语句)

export default {
  name: 'TaskManager',
  data() {
    return {
      newTask: '',
      tasks: [
        { text: '学习Vue3', completed: false },
        { text: '完成第一个项目', completed: true }
      ],
      messageInstance: null // 用于存储消息实例，方便控制
    }
  },
  methods: {
  // 添加新任务
  addTask() {
  if (!this.newTask.trim()) {
    this.showWarningMessage('请输入想要添加的内容')
    return
  }
  
  const taskText = this.newTask.trim()
  
  // 严格匹配（完全相同的文字）
  const isDuplicate = this.tasks.some(task => task.text === taskText)
  
  if (isDuplicate) {
    this.showWarningMessage('已经存在该任务')
    return
  }
  
  this.tasks.push({
    text: taskText,
    completed: false
  })
  this.newTask = ''
},
  
  // 删除任务 - 这个必须要有！
// 删除任务（带确认对话框）
async removeTask(index) {
  const task = this.tasks[index]
  
  // 如果任务已经完成，直接删除
  if (task.completed) {
    this.tasks.splice(index, 1)
    return
  }
  
  // 如果任务未完成，弹出确认对话框
  try {
    await this.$confirm(
      '你还没完成该任务，确定要删除吗？', // 提示消息
      '警告', // 标题
      {
        confirmButtonText: '确定', // 确认按钮文字
        cancelButtonText: '取消', // 取消按钮文字
        type: 'warning', // 类型（会有警告图标）
        showClose: true, // 显示关闭叉叉
        closeOnClickModal: false, // 点击遮罩不关闭
        confirmButtonClass: 'confirm-delete-btn', // 确认按钮的自定义class
        cancelButtonClass: 'cancel-delete-btn' // 取消按钮的自定义class
      }
    )
    
    // 如果用户点击了"确定"，删除任务
    this.tasks.splice(index, 1)
    
  } catch (error) {
    // 如果用户点击了"取消"或关闭叉叉，什么都不做
    console.log('用户取消了删除操作')
  }
},
  
  // 显示警告消息
  showWarningMessage(message) {
    if (this.messageInstance) {
      this.messageInstance.close()
    }
    
    this.messageInstance = this.$message({
      message: message,
      type: 'warning',
      duration: 3000,
      customClass: 'custom-warning-message'
    })
  }
}
}
  </script>
  
  <style scoped>
  .task-manager {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .input-section {
    margin-bottom: 20px;
  }
  
  .task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  
  .completed {
    text-decoration: line-through;
    color: #888;
  }
  
  .empty-tips {
    text-align: center;
    color: #999;
    padding: 40px;
    font-size: 16px;
  }
/* 新增效果实现: */
  /* 针对输入框附加按钮的悬停效果 */
:deep(.el-input-group__append .el-button--primary:hover) {
  background-color: #3375e0 !important; /* 更深的蓝色 */
  border-color: #3375e0 !important;
  transition: all 0.3s ease; /* 平滑过渡 */
}

:deep(.el-input-group__append .el-button--primary:hover) {
  background-color: #3375e0 !important;
  border-color: #3375e0 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  color: #000 !important; /* 添加这行：黑色文字 */
}

/* 自定义警告消息样式 */
:deep(.custom-warning-message) {
  background-color: #fdf6ec !important;
  border-color: #faecd8 !important;
  color: #e6a23c !important;
  font-weight: bold;
}

/* 确保消息框有渐变效果 */
:deep(.el-message) {
  transition: all 0.5s ease-in-out !important;
}

/* 消息消失时的动画 */
:deep(.el-message.fade-out) {
  opacity: 0;
  transform: translateY(-20px);
}

/* 确认删除对话框的按钮样式 */
:deep(.confirm-delete-btn) {
  background-color: #f56c6c !important;
  border-color: #f56c6c !important;
}

:deep(.confirm-delete-btn:hover) {
  background-color: #e05e5e !important;
  border-color: #e05e5e !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* 取消按钮的悬停效果 */
:deep(.cancel-delete-btn:hover) {
  background-color: #f0f0f0 !important;
  border-color: #dcdfe6 !important;
  color: #606266 !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}
  </style>